#{$css-scope} {
  // Layout classes.
  // ----------------------------------------------
  .spacer {
    flex-grow: 1;
  }

  .grow {
    flex-grow: 1;
    flex-basis: auto;
  }
  .no-grow {
    flex-grow: 0;
  }
  .shrink {
    flex-shrink: 1;
    margin-left: auto;
    margin-right: auto;
  }
  .no-shrink {
    flex-shrink: 0;
  }
  .fill-width {
    width: 100%;
  }
  .fill-height {
    height: 100%;
  }
  .basis-zero {
    flex-basis: 0;
  }

  .align-start {
    align-items: flex-start;
  }
  .align-center {
    align-items: center;
  }
  .align-end {
    align-items: flex-end;
  }
  .align-self-start {
    align-self: flex-start;
  }
  .align-self-center {
    align-self: center;
  }
  .align-self-end {
    align-self: flex-end;
  }
  .justify-start {
    justify-content: flex-start;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  // There is no justify-self in Flexbox.
  // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox
  .justify-space-between {
    justify-content: space-between;
  }
  .justify-space-around {
    justify-content: space-around;
  }
  .justify-space-evenly {
    justify-content: space-evenly;
  }

  .text-left {
    text-align: left;
  }
  .text-center {
    text-align: center;
  }
  .text-right {
    text-align: right;
  }

  .d-flex {
    display: flex;
  }
  .d-iflex {
    display: inline-flex;
  }
  .d-block {
    display: block;
  }
  .d-iblock {
    display: inline-block;
  }
  // ----------------------------------------------

  // Spaces.
  // ----------------------------------------------
  // Margin.
  @for $i from 0 through 12 {
    $number: round($i * $base-increment);
    .ma#{$i} {
      margin: $number;
    }
    .ma-#{$i} {
      margin: -$number;
    }
  }
  .maa {
    margin: auto;
  }
  .ma0 {
    margin: 0;
  }

  @for $i from 0 through 12 {
    $number: round($i * $base-increment);
    .mx#{$i} {
      margin-left: $number;
      margin-right: $number;
    }
    .mx-#{$i} {
      margin-left: -$number;
      margin-right: -$number;
    }
    .my#{$i} {
      margin-top: $number;
      margin-bottom: $number;
    }
    .my-#{$i} {
      margin-top: -$number;
      margin-bottom: -$number;
    }
  }
  .mxa {
    margin-left: auto;
    margin-right: auto;
  }
  .mx0 {
    margin-left: 0;
    margin-right: 0;
  }
  .mya {
    margin-top: auto;
    margin-bottom: auto;
  }
  .my0 {
    margin-top: 0;
    margin-bottom: 0;
  }

  @for $i from 0 through 12 {
    $number: round($i * $base-increment);
    .mt#{$i} {
      margin-top: $number;
    }
    .mt-#{$i} {
      margin-top: -$number;
    }
    .mr#{$i} {
      margin-right: $number;
    }
    .mr-#{$i} {
      margin-right: -$number;
    }
    .mb#{$i} {
      margin-bottom: $number;
    }
    .mb-#{$i} {
      margin-bottom: -$number;
    }
    .ml#{$i} {
      margin-left: $number;
    }
    .ml-#{$i} {
      margin-left: -$number;
    }
  }
  .mta {
    margin-top: auto;
  }
  .mt0 {
    margin-top: 0;
  }
  .mra {
    margin-right: auto;
  }
  .mr0 {
    margin-right: 0;
  }
  .mba {
    margin-bottom: auto;
  }
  .mb0 {
    margin-bottom: 0;
  }
  .mla {
    margin-left: auto;
  }
  .ml0 {
    margin-left: 0;
  }

  // Padding.
  @for $i from 1 through 12 {
    $number: round($i * $base-increment);
    .pa#{$i} {
      padding: $number;
    }
  }
  .pa0 {
    padding: 0;
  }

  @for $i from 0 through 12 {
    $number: round($i * $base-increment);
    .px#{$i} {
      padding-left: $number;
      padding-right: $number;
    }
    .py#{$i} {
      padding-top: $number;
      padding-bottom: $number;
    }
  }
  .px0 {
    padding-left: 0;
    padding-right: 0;
  }
  .py0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  @for $i from 0 through 12 {
    $number: round($i * $base-increment);
    .pt#{$i} {
      padding-top: $number;
    }
    .pr#{$i} {
      padding-right: $number;
    }
    .pb#{$i} {
      padding-bottom: $number;
    }
    .pl#{$i} {
      padding-left: $number;
    }
  }
  .pt0 {
    padding-top: 0;
  }
  .pr0 {
    padding-right: 0;
  }
  .pb0 {
    padding-bottom: 0;
  }
  .pl0 {
    padding-left: 0;
  }
  // ----------------------------------------------

  // Sizes.
  // ----------------------------------------------
  // In all the sizes bellow, round(x / 2) * 2 to always have even numbers.
  // Different heights with a mix of odd and even numbers will misalign
  // when vertically centering (vertical-align or align-items center).
  .size--xs {
    font-size: round(0.85 * $base-font-size);
  }
  .size--sm {
    font-size: round(1 * $base-font-size);
  }
  .size--md {
    font-size: round(1.1 * $base-font-size);
  }
  .size--lg {
    font-size: round(1.4 * $base-font-size);
  }
  .size--xl {
    font-size: round(1.65 * $base-font-size);
  }
  // ----------------------------------------------

  // Grid system.
  // ----------------------------------------------
  $grid-base: 12;
  @for $i from 0 through $grid-base {
    .xs#{$grid-base - $i} {
      width: ($grid-base - $i) * 100% / $grid-base;
    }
  }

  // CSS variables are not supported in media queries yet.
  // https://www.w3.org/TR/css-variables-1/#using-variables
  // So done in w-app instead.
  // @media screen and (min-width: var(--breakpoint-xs)) {
  //   @for $i from 0 through $grid-base {
  //     .sm#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
  //   }
  // }

  // @media screen and (min-width: var(--breakpoint-sm)) {
  //   @for $i from 0 through $grid-base {
  //     .md#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
  //   }
  // }

  // @media screen and (min-width: var(--breakpoint-md)) {
  //   @for $i from 0 through $grid-base {
  //     .lg#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
  //   }
  // }

  // @media screen and (min-width: var(--breakpoint-lg)) {
  //   @for $i from 0 through $grid-base {
  //     .xl#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
  //   }
  // }
  // ----------------------------------------------
}
